<template>
  <div id="Login">
    <!-- <my-msg/> -->
    <!-- <el-alert v-if="errmsg.length > 0" :title="errmsg" type="error" show-icon :closable="false">
    </el-alert> -->
    <el-container>
      <el-main>
        <el-row :gutter="40">
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <div>
              <h1>
                <i class="iconfont icon-inverse-custom"></i>
              </h1>
              <h1>{{ title }}</h1>
              <el-form label-position="top" label-width="80px" :model="formLogin" ref="formLogin">
                <el-form-item label="账  号">
                  <el-input autofocus="true" clearable v-model="formLogin.username"></el-input>
                </el-form-item>
                <el-form-item label="密  码">
                  <el-input clearable type="password" v-model="formLogin.password"></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 2rem;">
                  <el-button class="btn-lg" type="primary" @click="submitForm('formLogin')">{{ title }}</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col class="hidden-md-and-down login-bg" :lg="16" :xl="16">

          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<style>
#Login h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  text-align: center;
}

#Login label {
  font-weight: 600;
}

#Login .login-bg {
  background-image: url("../assets/images/login-bg-1.jpg");
  filter: grayscale(0.8);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  margin: -20px -20px -20px 0;
  height: 100vh;
  position: fixed;
  right: 0;
}

#Login .btn-lg {
  width: 100%;
}

#Login .icon-inverse-custom {
  font-size: 8rem;
  font-weight: 500;
  color: #50c28b;
}

#Login .el-alert--error {
  padding: 1.25rem;
  font-size: 1.5rem;
  font-weight: 800;
}

#Login .el-alert__content {
  display: inherit;
}
</style>

<script>
// import { mapGetters } from "vuex";
// import MyMsg from "@/components/MyMsg";

export default {
  name: "Login",
  components: {
    // MyMsg
  },
  // computed: {
  //   ...mapGetters({
  //     errmsg: "authenticationError",
  //     hasLogged: "authenticationStates"
  //   })
  // },
  // watch: {
  //   hasLogged: {
  //     deep: true,
  //     handler: "onAuthenticationStatesChange"
  //   }
  // },
  data() {
    return {
      title: "登  录",
      formLogin: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    submitForm(formName) {
      var self = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          var password = require("crypto")
            .createHash("sha1")
            .update(self.formLogin.password)
            .digest("hex");
          console.log(password);
          this.$store.dispatch("reqGetAccessToken", {
            username: self.formLogin.username,
            password
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    onAuthenticationStatesChange(curVal, oldVal) {
      console.log(curVal);
      if (curVal) {
        // this.$message({
        //   message: "登录成功",
        //   type: "success",
        //   showClose: true,
        //   onClose: () => this.$router.replace({ name: "Main" })
        // });
      }
    }
  }
};
</script>
